<template>
  <div ref="wangeditor">
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import E from 'wangeditor'
import { upload } from '@/services/course'
export default Vue.extend({
  name: 'dhwangeditor',
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {}
  },
  mounted () {
    const editor = new E((this.$refs as any).wangeditor)
    editor.config.focus = false
    // 配置 onchange 回调函数
    editor.config.onchange = (newHtml: any) => {
      console.log('change 之后最新的 html', newHtml)
      this.$emit('input', newHtml)
    }
    editor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      console.log(resultFiles, '-----')
      const fd = new FormData()
      fd.append('file', resultFiles[0])
      const { data } = await upload(fd, (e: any) => {
        console.log(Math.floor(e.loaded / e.total * 100))
      })
      // 上传图片，返回结果，将图片插入到编辑器中
      insertImgFn(data.name)
    }
    editor.create()
    if (this.value) {
      editor.txt.html(this.value)
    }
  }
})
</script>
<style lang='scss' scoped>
</style>
